<template>
  <div>
    <el-table ref="tables" :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" :index="indexMethod" align="center"></el-table-column>
      <el-table-column type="index" label="序号" align="center"></el-table-column>
      <template v-for="(item, index) in renderTables">
        <el-table-column :key="index" :label="item.label" :prop="item.value" :width="item.width"
          align="center"></el-table-column>
      </template>
      <el-table-column v-if="types.operate" label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button v-if="types.download" size="small" type="text" class="el-icon-view"
            @click="handledownload(scope.row)">
            下载</el-button>
          <el-button v-if="types.imports" size="small" type="text" class="el-icon-view" @click="handlimport(scope.row)">
            上传</el-button>
          <el-button v-if="types.view" size="small" type="text" class="el-icon-view" @click="handleview(scope.row)">
            查看</el-button>
          <el-button v-if="types.edit" size="small" type="text" class="el-icon-edit" @click="handleEidt(scope.row)">
            编辑</el-button>
          <el-button v-if="types.del" size="small" type="text" class="el-icon-delete" @click="handleDel(scope.row)">
            删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'TableList',
  props: {
    // 列表渲染的数据
    tableData: {
      type: Array,
      default: () => []
    },
    // 列表字段渲染的数据
    renderTables: {
      type: Array,
      default: () => []
    },
    // 列表操作按钮的类型
    types: {
      type: Object,
      default: () => { }
    },
    // 批量删除的接口方法
    batchDelete: {
      type: Function,
      default: function () { }
    },
    // 查询列表方法
    tableList: {
      type: Function,
      default: function () { }
    },
    // 点击编辑详情方法
    viewMethods: {
      type: Function,
      default: function () { }
    },
    // 点击查看详情方法
    viewDetails: {
      type: Function,
      default: function () { }
    }
  },
  data () {
    return {
      // 批量删除id
      deleteId: '',
      // 批量删除的数组
      multipleSelection: []
    }
  },
  methods: {
    /**
     * 查看
     * @param {Object} currentValue 当前行
     */
    async handleview (currentValue) {
      this.viewDetails(currentValue)
    },

    /**
     * 编辑
     * @param {Object} currentValue 当前行
     */
    async handleEidt (currentValue) {
      this.$parent.showDialog = true
      this.viewMethods(currentValue)
    },
    handledownload () { },
    handlimport () { },
    /**
     * 序号一条龙
     * @param {Number} index 序号
     */
    indexMethod (index) {
      return (this.query.page - 1) * this.query.pageSize + index + 1
    },
    /**
     * 多选框选择数据
     * @param {Array} currentValue 选中的数据
     */
    handleSelectionChange (currentValue) {
      this.multipleSelection = currentValue
      const arr = currentValue
      const deleteID = []
      arr.forEach(item => {
        deleteID.push(item.id)
      })
      this.deleteId = deleteID.join(',')
    },
    /**
     * 批量删除
     */
    allDel () {
      if (this.multipleSelection.length < 1) {
        this.$message.warning('请勾选数据！')
      } else {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const res = await this.batchDelete(this.deleteId)
          if (res.code === 200) {
            this.$message.success('删除成功!')
            this.tableList()
          } else {
            this.$message.error('删除失败!')
          }
        }).catch(() => {
          this.$message.info('已取消删除!')
          this.$refs.tables.clearSelection()
          this.deleteId = ''
        })
      }
    },
    /**
     * 删除
     * @param {Object} currentValue 当前行的数据
     */
    handleDel (currentValue) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await this.batchDelete(currentValue.id)
        if (res.code === 200) {
          this.$message.success('删除成功!')
          this.tableList()
        } else {
          this.$message.error('删除失败!')
        }
      }).catch(() => {
        this.$message.info('已取消删除!')
      })
    }
  }
}
</script>

<style lang="less" scoped></style>
